<template>
  <div className="container">
    <div className="goods">
      <div className="main" v-for="item in 10">
        <div className="imgs">
          <img src="../../assets/test.png" alt="" />
        </div>
        <div className="introduce">
          <div className="text">
            {{
              "iPhone14 pro max 99新 可小刀 在保修期还有三个月 不支持到付 屠龙刀勿扰 送原装充电器与线"
            }}
          </div>
        </div>
        <div className="content">
          <div className="price">
            <svg
              t="1664707264256"
              class="icon32"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="26866"
              width="14"
              height="14"
            >
              <path
                d="M447.488 764.928l-197.632 0q-27.648-2.048-42.496-23.04t-17.92-46.592q3.072-25.6 17.92-41.984t42.496-18.432l197.632 0 0-64.512-197.632-1.024q-27.648-2.048-42.496-19.456t-17.92-44.032q3.072-25.6 17.92-41.984t42.496-18.432l147.456 0-137.216-241.664q-10.24-12.288-19.456-31.232t-8.192-41.472q5.12-28.672 20.48-46.592t57.344-23.04q24.576 2.048 44.032 16.896t31.744 32.256l155.648 284.672 171.008-286.72q12.288-17.408 31.744-30.72t44.032-16.384q15.36 1.024 28.16 4.096t22.528 10.24 16.384 20.48 9.728 34.816q0 29.696-20.48 56.32l-158.72 258.048 150.528 0q26.624 2.048 41.984 18.432t17.408 41.984q-2.048 26.624-17.92 45.056t-42.496 20.48l-195.584 1.024 0 62.464 196.608 0q26.624 2.048 41.984 20.48t17.408 44.032q-2.048 26.624-17.408 44.544t-41.984 19.968l-196.608-1.024 0 108.544q-4.096 87.04-95.232 87.04-45.056 0-70.144-21.504t-27.136-65.536l0-106.496z"
                p-id="26867"
              ></path>
            </svg>
            <div className="priceSingnal">
              {{ item }}
            </div>
          </div>
          <div className="collection">
            <svg
              t="1664707341173"
              class="icon44"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="27790"
              width="20"
              height="20"
            >
              <path
                d="M908.8 214.4c-9.6-12.8-19.2-22.4-28.8-32-112-115.2-230.4-105.6-342.4-16-9.6 6.4-19.2 16-28.8 25.6-9.6-9.6-19.2-16-28.8-25.6-112-86.4-230.4-99.2-342.4 16-9.6 9.6-19.2 19.2-25.6 32-134.4 195.2-60.8 387.2 137.6 560 44.8 38.4 89.6 73.6 137.6 102.4 16 9.6 32 19.2 44.8 28.8 9.6 6.4 12.8 9.6 19.2 9.6 3.2 3.2 6.4 3.2 12.8 6.4 3.2 3.2 9.6 3.2 16 6.4 25.6 6.4 64 3.2 89.6-12.8 3.2 0 9.6-3.2 16-9.6 12.8-6.4 28.8-16 44.8-28.8 48-28.8 92.8-64 137.6-102.4C969.6 598.4 1043.2 406.4 908.8 214.4zM736 732.8c-41.6 35.2-86.4 70.4-131.2 99.2-16 9.6-28.8 19.2-44.8 25.6-6.4 3.2-12.8 6.4-16 9.6-6.4 3.2-16 6.4-25.6 9.6-3.2 0-6.4 0-9.6 0-6.4 0-12.8 0-16 0-3.2 0-3.2 0-3.2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0-3.2 0-3.2-3.2-3.2 0-6.4-3.2-9.6-3.2-3.2-3.2-9.6-6.4-16-9.6-12.8-6.4-28.8-16-44.8-25.6-44.8-28.8-89.6-60.8-131.2-99.2-179.2-160-243.2-323.2-131.2-489.6 6.4-9.6 16-16 22.4-25.6 89.6-96 182.4-86.4 275.2-12.8 9.6 6.4 16 12.8 22.4 19.2 0 0 0 0 0 0l28.8 32c3.2 3.2 3.2 3.2 6.4 6.4 0 0 0 0 0 0l0 0c3.2-3.2 9.6-9.6 16-16 12.8-12.8 25.6-25.6 41.6-38.4 92.8-73.6 185.6-83.2 275.2 12.8 6.4 9.6 16 16 22.4 25.6C982.4 406.4 918.4 572.8 736 732.8z"
                p-id="27791"
              ></path>
            </svg>
          </div>
          <div className="want">
            <el-button type="primary">{{ "我想要" }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Bar from "../../components/bar/index.vue";
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 700px;
  position: relative;
  margin-top: 61px;
  background-color: #fff;
  &:hover {
    cursor: pointer;
  }
  .goods {
    position: absolute;
    width: 1000px;
    height: 664px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 10px;
    .main {
      width: 170px;
      height: 290px;
      background-color: #fff;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 0px solid rgba(255, 255, 255, 0.18);
      box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
      -webkit-box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
      position: relative;
      padding: 10px;
      border-radius: 10px;
      .imgs {
        width: 170px;
        height: 190px;
        margin-top: 10px;
        img {
          width: 150px;
          height: 180px;
          margin-left: 10px;
          border-radius: 10px;
          &:hover {
            transform: scale(1.05);
            transition: 0.5s;
          }
        }
      }
      .introduce {
        width: 170px;
        font-size: 12px;
        font-weight: 900;
        border-bottom: 1px dashed #ccc;
        .text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-top: 5px;
        }
      }
      .content {
        width: 170px;
        background-color: #ccc;
        display: flex;
        margin-top: 45px;
        justify-content: space-between;
        position: relative;
        .price {
          display: flex;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-size: 14px;
          font-weight: 900;
          .icon32 {
            position: absolute;
            top: -9px;
            left: -2px;
          }
          .priceSingnal {
            position: absolute;
            top: -13px;
            left: 14px;
          }
        }
        .collection {
          display: flex;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
        .want {
          position: absolute;
          top: 50%;
          left: 63%;
          transform: translate(-50%, -50%);
          .el-button {
            font-size: 14px;
            font-weight: 900;
          }
        }
      }
    }
  }
}
</style>
